<template>
    <div>
        
        <p class="top">我的</p>
        <LoginT v-show="login == 1" />
        <LoginF v-show="login == 0" />
        <div class="MiddBox">
            <img src="./state/阴影球.svg" alt="" class="tImg1">
            <img src="./state/阴影球.svg" alt="" class="tImg2">
            <div class="mid">
                <h5 class="vipText">会员中心</h5>
                <img src="./state/会员中心.svg" alt="" class="tImg">
                <div class="MiddBottImg">
                    <div class="bo">
                        <img src="./state/会员图片1.png" alt="">
                        <p>生活特权</p>
                    </div>
                    <div class="bo">
                        <img src="./state/会员图片2.png" alt="">
                        <p>会员特权</p>
                    </div>
                    <div class="bo">
                        <img src="./state/会员图片3.png" alt="">
                        <p>积分抽奖</p>
                    </div>
                    <div class="bo">
                        <img src="./state/会员图片4.png" alt="">
                        <p>积分秒杀</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="BotBox">
            <h4 style="margin: 0px">基础服务</h4>
            <ul>
                <li>
                    <img src="./state/服务1.svg" alt="">
                    <p>我的收藏</p>
                </li>
                <li>
                    <img src="./state/服务2.svg" alt="">
                    <p>浏览足迹</p>
                </li>
                <li>
                    <img src="./state/服务3.svg" alt="">
                    <p>帮助与客服</p>
                </li>
                <li>
                    <img src="./state/服务4.svg" alt="">
                    <p>设置</p>
                </li>
                <li>
                    <img src="./state/服务5.svg" alt="">
                    <p>购药红包</p>
                </li>
                <li>
                    <img src="./state/服务6.svg" alt="">
                    <p>积分商城</p>
                </li>
                <li>
                    <!-- <img src="./state/服务6.svg" alt="">
                    <p>积分商城</p> -->
                </li>
                <li>
                    <!-- <img src="./state/服务6.svg" alt="">
                    <p>积分商城</p> -->
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import LoginT from './LoginT.vue';
import LoginF from './LoginF.vue';
let login = ref(0)
</script>

<style scoped>
.BotBox ul{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-left: -4px;
    margin-top: 10px;
    height: 35px;
}
.BotBox ul li{
    margin-left: 10px;    
    text-align: center;
    flex: 1 1 20%;
    height: 70px;
}
.BotBox ul li img {
    margin: 0 auto;
}
.BotBox ul li p {
    color: grey;
    font-size: small;
}
ul{
    list-style-type: none;
}
.BotBox{
    width: 90%;
    height: 185px;
    margin: 10px auto;
    border-radius: 10px;
    box-shadow: 0 0 1px grey;
    box-sizing: border-box;
    padding: 10px;
}
.MiddBox::before {
    content: '规划中';
    position: absolute;
    text-align: center;
    font-family: '隶书';
    top: 0;
    left: 3px;
    width: 25%; /* 梯形的宽度 */
    height: 20px; /* 梯形的高度 */
    background: #ffcc00; /* 梯形的背景色 */
    z-index: 1; /* 确保梯形在盒子内容之上 */
    clip-path: polygon(28% 0, 80% 0, 100% 100%, 0 100%); /* 裁剪梯形形状 */
    transform: rotate(-50deg) translate(-34%, -50%); /* 旋转并移动梯形 */
  }
.Box h4{
    line-height: 0px;
    position: relative;
    top: -10px;
}
.MiddBottImg {
    display: flex;
    justify-content: space-around;
    padding-top: 50px;
}
.MiddBottImg img{
    width: 60px;
    height: 60px;
}
.MiddBottImg p{
    text-align: center;
    font-size: smaller;
    color: #686868;
}
.vipText {
    position: absolute;
    top: -23px;
    left: 147px;
    z-index: 2;
    font-size: 15px;
    color: white;
}

.tImg {
    position: absolute;
    top: -7px;
    left: 115px;
}

.mid {
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 10px;
}

.tImg1 {
    position: absolute;
    top: -7px;
    left: 109px;
    z-index: -100;
}

.tImg2 {
    position: absolute;
    top: -7px;
    left: 229px;
    z-index: -100;
}

.MiddBox {
    width: 90%;
    height: 150px;
    box-shadow: 0 0 5px grey;
    margin: 10px auto;
    border-radius: 10px;
    position: relative;
}



/* 用户信息盒子 */


/*顶部我的*/
.top {
    text-align: center;
    font-size: 15px;
    line-height: 5px;
}
</style>
